<template>
  <h1 v-text="count" @click="increment"></h1>
  <h1 v-text="count" @click="updateCount(5)"></h1>
  <button @click="updateGender(-1)">红男绿女</button>
  <button @click="updateGender(1)">精神小伙儿</button>
  <button @click="updateGender(0)">扒蒜老妹儿</button>
  <table align="center">
    <thead>
    <tr>
      <th>姓名</th>
      <th>性别</th>
    </tr>
    </thead>
    <tbody>
    <tr v-for="person in persons">
      <td v-text="person.name"></td>
      <td v-text="person.gender === 1 ? '精神小伙儿':'扒蒜老妹儿'"></td>
    </tr>
    </tbody>
  </table>
</template>
<script lang="ts" setup>
import {useStore} from "../../store/chap17";
import {storeToRefs} from "pinia";

const store = useStore();
console.log(store);
const {count} = storeToRefs(store);
const {increment, updateCount, updateGender} = store;
const {persons} = storeToRefs(store);
</script>

<script lang="ts">
export default {
  name: "LhzA"
}
</script>

<style scoped>

</style>